<template>
    <div class="goods-info">

        <!-- 去购物车的小球 -->
        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
         <div class="globule" v-show="flag"></div>
        </transition>
        <!-- 轮播图 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :lunbotu="lunbotulist" :isfull="false"></swipe>
                </div>
            </div>
        </div>
        <!-- 购买信息 -->
        <div class="mui-card">
            <div class="mui-card-header">
                {{goodsinfo.title}}
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                     <p class="goods-price">
                        市场价:<span class="old-price">&nbsp;￥<del>{{goodsinfo.market_price}}</del></span>
                        销售价:&nbsp;<span class="new-price">￥{{goodsinfo.sell_price}}</span>
                     </p> 
                     <div class="goods-number">
                        购买数量    
                         <div class="number">
                            <number :stock="goodsinfo.stock_quantity" @numbox='getnumber'></number>  
                         </div>
                     </div>  
                     <div class="btns">
                        <van-button plain hairline type="primary">立即购买</van-button>
                        <van-button plain hairline type="info" @click="addGoodsCar">加入购物车</van-button>
                     </div>
                </div>
            </div>
           
        </div>
        <!-- 商品详情  -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  <p>商品货号:&nbsp;{{goodsinfo.goods_no}}</p>
                  <p>库存情况:&nbsp;{{goodsinfo.stock_quantity}}</p>
                  <p>上架时间:&nbsp;{{goodsinfo.add_time|dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer buttom">
                <van-button  plain hairline type="info" size="large" @click="push">商品描述</van-button>
                <van-button class="next-buttom" plain hairline type="info" size="large" @click="goComment">商品评论</van-button>
            </div>
          
        </div>
    </div>
</template>
<script>
    import {
        mapMutations
    } from 'vuex'
    import number from '../tool/goodsNumber.vue'
    import swipe from '../tool/lunbotu.vue'
    export default {
        data() {
            return {
                gocount: 1,
                goodsinfo: {},
                //轮播图数组
                lunbotulist: [],
                flag: false,
            }
        },
        created() {
            this.getdesc(),
                this.getthumimages()
        },
        methods: {
            //mapstate 映射 vuex中方法到组件中
            ...mapMutations(['getCount']),
            //获取商品参数区和价格，标题等数据
            async getdesc() {
                const {
                    data
                } = await this.$http.get('api/goods/getinfo/' + this.id)
                if (data.status === 0) this.goodsinfo = data.message[0];
                console.log(data.message[0]);
            },
            //商品详情页面中轮播图数组
            async getthumimages() {
                const {
                    data
                } = await this.$http.get('api/getthumimages/' + this.id)
                if (data.status === 0) {

                    data.message.forEach(item => {
                        item.img = item.src
                    })
                    this.lunbotulist = data.message;
                }
            },
            // 编程式路由方式一  传参
            // 跳转路由到评论内容
            goComment() {
                this.$router.push({
                    name: "goodsComment",
                    params: {
                        id: this.goodsinfo.id
                    }
                })
            },
            //编程式路由方式二
            //跳转了路由商品详情页
            push() {
                this.$router.push('/pohotos/goodsdesc/' + this.goodsinfo.id)
            },

            //加入购物车
            addGoodsCar() {
                //将小球显示
                this.flag = !this.flag

                // vuex 改变state中数据状态
                //当购买商品的数量变化时,改变state 商品数量的
                this.getCount({
                    count: this.gocount,
                    id: parseInt(this.id),
                    title: this.goodsinfo.title,
                    price: this.goodsinfo.sell_price,
                    status: true
                })
            },
            //加入购物车小球动画
            beforeEnter(el) {
                el.style.transform = "translate(0,0)";
            },
            enter(el, done) {
                el.offsetWidth
                    //因为手机页面大小不一致 故动态计算小球和购物车徽标的位置  api: getBoundingClientRect()
                    //计算小球的位置 
                const ballPosition = el.getBoundingClientRect();
                //计算徽标的位置
                const logoPosition = document.getElementsByClassName("van-info")[0].getBoundingClientRect();
                //计算x 轴位移的位置

                const xDit = logoPosition.left - ballPosition.left;
                //计算 y轴位移的位置
                const yDit = logoPosition.top - ballPosition.top;

                //设置位移的位置
                el.style.transform = 'translate(' + xDit + 'px,' + yDit + 'px)';
                el.style.transition = 'all 1s cubic-bezier(.42,-0.35,.29,1.16)';

                done();
            },
            afterEnter(el) {
                this.flag = !this.flag;
            },
            //接收子组件传过来的值
            getnumber(numbox) {
                this.gocount = numbox;
                console.log(this.gocount + "++ ++ ++");

            }
        },
        //注册引用的组件
        components: {
            swipe,
            number
        },
        //接收到的商品id
        props: ['id', 'lunbotu'],

    }
</script>
<style lang="scss">
    .goods-info {
        .globule {
            width: 12px;
            height: 12px;
            background-color: red;
            border-radius: 50%;
            z-index: 99;
            position: absolute;
            top: 438px;
            left: 140px;
        }
        .new-price {
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .old-price {
            font-size: 13px;
            margin-right: 15px;
        }
        .buttom {
            flex-direction: column;
            .next-buttom {
                margin-top: 10px;
            }
        }
        .mui-card-content {
            .goods-number {
                color: #8f8f94;
                display: flex;
                line-height: 40px;
                .number {
                    padding-top: 5px;
                }
                .van-stepper {
                    display: flex;
                    margin-left: 10px;
                }
            }
        }
    }
</style>